<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		body{
			font: 12px/1.5 tahoma;
		}
		#outer{
			width: 560px;
			margin: 0 auto;
			border: 1px solid #000;
			text-align: center;
		}
		#outer ul{
			margin: 0;
			padding: 0;
			list-style: none;
			overflow: hidden;
			padding: 5px;
		}
		#outer li{
			float: left;
			width: 100px;
			height: 100px;
			margin: 5px;
			position: relative;
		}
		#outer li a{
			display: block;
			text-decoration: none;
			width: 80px;
			height: 80px;
			padding: 10px;
			border: 1px solid #000;
			background-color: #f0f0f0;
			color: #666;
			cursor: crosshair;
		}
		#outer li a strong{
			display: block;
		}
		#outer li img{
			display: none;
			position: absolute;
			top: -14px;
			left: -14px;
			border: 2px solid lightgray;
			cursor: pointer;
		}
		.zindex{
			z-index: 10;
		}		
	</style>
</head>
<body>
<div id="outer">
	<h2>名车车标展示</h2>
	<ul>
		<!--(li>(a[href="#"]>strong{BMW}+{宝马汽车})+img[src=img/$.jpg])-->
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/1.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/2.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/3.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/4.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/5.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/6.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/7.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/8.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/9.jpg" alt=""></li>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/10.jpg" alt=""></li>
	</ul>
</div>
<script type="text/javascript">
	
window.onload = function () {
	var lis = document.querySelectorAll('li');
	var imgs = document.querySelectorAll('img');
	
	for (var i = 0; i < lis.length; i++) {
		lis[i].index = i;
		lis[i].onmouseover = function () {
			this.className = 'zindex';
			imgs[this.index].style.display = 'block';
		}
		
		lis[i].onmouseout = function () {
			this.className = '';
			imgs[this.index].style.display = 'none';
		}
	}		
}
</script>
</body>
</html>